<template>
	<div id="center">
		<!-- <Echart :options="options" id="bottomLeftChart" height="370px" width="100%" v-if="options"></Echart> -->
		<div id="chinaMap" ref="mapChart" style="width:1920px;height:930px;"></div>
	</div>
</template>

<script type="text/javascript">
	import * as echarts from 'echarts'
	import shanxiJson from '@/assets/json/shanxi.json'
	import Echart from '@/components/echart'
	import { autoHover } from '@/utils/tools'
	import { getChinaJson, getProvinceJson, getCityJson, getDistrictJson } from "@/api/map";
	export default {
		name: "",
		components: { Echart },
		data() {
			return {
				options: '',
				tooltipAutoplayIndex: 0,
				mapData: {
					projectData: [
						{ name: '大同市', value: (Math.random() * 300).toFixed(0), },
						{ name: '太原市', value: (Math.random() * 300).toFixed(0), },
						{ name: '晋中市', value: (Math.random() * 300).toFixed(0), },
						{ name: '阳泉市', value: (Math.random() * 300).toFixed(0), },
						{ name: '忻州市', value: (Math.random() * 300).toFixed(0), },
						{ name: '朔州市', value: (Math.random() * 300).toFixed(0), },
						{ name: '吕梁市', value: (Math.random() * 300).toFixed(0), },
						{ name: '临汾市', value: (Math.random() * 300).toFixed(0), },
						{ name: '长治市', value: (Math.random() * 300).toFixed(0), },
						{ name: '运城市', value: (Math.random() * 300).toFixed(0), },
						{ name: '晋城市', value: (Math.random() * 300).toFixed(0), },
					],
				},
				tootipTimer: '',
				jsonName: 'shanxi',
				city: [
					{ name: '太原', pin: 'taiyuan' },
					{ name: '长治', pin: 'changzhi' },
					{ name: '大同', pin: 'datong' },
					{ name: '晋城', pin: 'jincheng' },
					{ name: '晋中', pin: 'jinzhong' },
					{ name: '临汾', pin: 'linfen' },
					{ name: '吕梁', pin: 'lvliang' },
					{ name: '朔州', pin: 'shuozhou' },
					{ name: '忻州', pin: 'xinzhou' },
					{ name: '阳泉', pin: 'yangquan' },
					{ name: '运城', pin: 'yuncheng' },
				],
				geoJson: []
			}
		},
		mounted() {
			this.getJsonData()
			// this.draw()
		},
		methods: {
			getJsonData() {
				getProvinceJson(this.jsonName).then(res => {
					console.log(res)
					this.geoJson = res
					this.draw(res)
				})
			}, 
			draw(mapJson) { 
				// const highLight = require("@/assets/609.png");
				// console.log(highLight)
				const highLight = require("@/assets/609.png");
				const textBg = require("@/assets/textBg.png");
				let mapChart = echarts.init(this.$refs.mapChart)
				echarts.registerMap('mapJson', mapJson)
				let options = {
					tooltip: {
						trigger: 'item',
						backgroundColor: "#2359b3bf",
						borderRadius: 10,
						padding: [20, 20, 20, 20],
						textStyle: {
							color: 'white',
							align: 'left',
							fontSize: 16
						},
					}, 
					series: [ 
						{
							type: 'map3D',
							map: 'mapJson',
							top: '-10%',
							// bottom: '-3%',
							// left:'6%',
							regionHeight: 5,
							boxHeight: 15,
							boxWidth: 43,
							// left:'5%',
							shading: 'realistic',
							// realisticMaterial: {
							// 	detailTexture:'../../img/sxMap.png', 
							// 	textureTiling:10
							// },
							// 真实感材质相关配置 shading: 'realistic'时有效
							realisticMaterial: {
								// detailTexture: '#fff', // 纹理贴图
								// detailTexture:'../../img/sxMap.png',
								textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
								roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
								metalness: 0, // 0材质是非金属 ，1金属
								roughnessAdjust: 0
							},
							// mapType: 'shanxi',
							roam: false, //是否开启缩放平移
							label: {
								show: true,
								distance: 0,
								formatter(param) { 
									return `{img|${param.dataIndex+1}}{b|${param.data.name}${param.data.value}}`;
								},
								rich: {
									img: {
										fontSize: 18,
										color: '#fff',
										width: 36,
										height: 42,
										lineHeight: 50,
										backgroundColor: {
											image: highLight //注意路径带不带/
										},
										align: 'center',
										fontWeight: 'bolder',
									},
									b: {
										fontSize: 16,
										color: '#fff',
										backgroundColor: {
											image: textBg //注意路径带不带/
										},
										align: 'left',
										padding: [5,0]
									},
									c: {
										fontSize: 16,
										color: '#fff000'
									}
								},
								textStyle: {
									color: '#ffffff',

								},
							},
							itemStyle: {
								color: "#2878ff",
								opacity: 0.9,
								borderWidth: 1.5,
								borderColor: "#c1c1c1",
							},
							emphasis: { //对应的鼠标悬浮效果
								label: {
									show: true,
									color: '#fff'
								},
								itemStyle: {
									color: "#F5B348",
									opacity: 0.8
								}
							},
							light: {
								// 光照阴影
								main: {
									color: "#fff", //光照颜色
									intensity: 2, //光照强度
									shadowQuality: 'high', //阴影亮度
									shadow: true, //是否显示阴影
									shadowQuality: "ultra", //阴影质量 ultra //阴影亮度
									alpha: 10,
									beta: 5
								},
								ambient: {
									color: '#fff',
									intensity: 0.7
								}
							},
							viewControl: {
								alpha: 70, //视角绕 x 轴，即上下旋转的角度。配合 beta 可以控制视角的方向。
								beta: 15, //视角绕 y 轴，即左右旋转的角度。
							},
							data: this.mapData.projectData,
							groundPlane: {
								show: false
							}
						},

					]

				};
				mapChart.setOption(options);
				// this.tootipTimer && this.tootipTimer.clearLoop(); // this.tootipTimer 在data里定义
				// this.tootipTimer = 0;
				// this.tootipTimer = autoHover(mapChart, options, 11, 3000);
				mapChart.on('click', function (params) {
					console.log(params)
					let city = this.mapData.find(item => item.value == params.name);
					// this.jsonName=city.pin

					//params.name 结果是“重庆=chongqing” 

				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	#center {
		width: 1920px;
		margin: 0 auto;
	}
</style>